import React from 'react';
import { Notification, Button }  from '../src';

export default {
  title: 'Notification',
  component: Notification,
} as any;

export const All = () =>
  <div style={{ maxWidth: "500px", margin: "auto" }}>
    <div>
      <div className="">Top Left</div>
      <Button onClick={() => Notification.success({ title: "Success", message: "Action completed!" })}>Open Notification</Button>
      <Button bg="red" onClick={() => Notification.error({ title: "Error", message: "Action Failed!" })}>Open Notification</Button>
      <Button bg="orange" onClick={() => Notification.warning({ title: "Warning", message: "Action Completed with an Error!" })}>Open Notification</Button>
    </div>

    <div>
      <div className="">Top Right</div>
      <Button onClick={() => Notification.success({ title: "Success", message: "Action completed!" , position: "top-left"})}>Open Notification</Button>
      <Button bg="red" onClick={() => Notification.error({ title: "Error", message: "Action Failed!", position: "top-left"})}>Open Notification</Button>
      <Button bg="orange" onClick={() => Notification.warning({ title: "Warning", message: "Action Completed with an Error!", position: "top-left"})}>Open Notification</Button>
    </div>

    <div>
      <div className="">Top Center</div>
      <Button shadow onClick={() => Notification.success({ title: "Success", message: "Action completed!" , position: "top-center"})}>Open Notification</Button>
      <Button bg="red" onClick={() => Notification.error({ title: "Error", message: "Action Failed!", position: "top-center"})}>Open Notification</Button>
      <Button bg="orange" onClick={() => Notification.warning({ title: "Warning", message: "Action Completed with an Error!", position: "top-center"})}>Open Notification</Button>
    </div>

  </div>;